<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑个人资料 - 个人博客</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        neutral: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-label {
                @apply block text-sm font-medium text-gray-700 mb-1;
            }
            .form-input {
                @apply pl-10 w-full rounded-lg border border-gray-300 py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all;
            }
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .transition-all-300 {
                @apply transition-all duration-300 ease-in-out;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 shadow-md hover:shadow-lg;
            }
            .btn-light {
                @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
            }
            .btn-hover {
                @apply hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200;
            }
        }
    </style>
    
    <style>
        /* 全局样式 */
        body {
            font-family: 'Inter', sans-serif;
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col font-inter">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="{{ url_for('index') }}" class="flex items-center space-x-2">
                <span class="text-2xl font-bold text-primary">
                    <i class="fa fa-feather"></i> 个人博客
                </span>
            </a>
            
            <div class="flex items-center space-x-1">
                {% if current_user.is_authenticated %}
                <div class="flex items-center space-x-3">
                    <div class="relative group">
                        <button class="flex items-center space-x-2 focus:outline-none">
                            <img src="{{ current_user.get_avatar(32) }}" alt="{{ current_user.nickname }}" class="w-8 h-8 rounded-full border-2 border-transparent group-hover:border-primary transition-all duration-200">
                            <span class="hidden md:inline-block text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                {{ current_user.nickname or current_user.email.split('@')[0] }}
                            </span>
                            <i class="fa fa-chevron-down text-xs text-gray-400 group-hover:text-primary transition-colors"></i>
                        </button>
                        
                        <!-- 下拉菜单 -->
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-right scale-95 group-hover:scale-100">
                            <a href="{{ url_for('profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary transition-colors">
                                <i class="fa fa-user-circle mr-2"></i> 个人资料
                            </a>
                            <a href="{{ url_for('new_post') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary transition-colors">
                                <i class="fa fa-pencil mr-2"></i> 发布文章
                            </a>
                            <a href="{{ url_for('user_posts', username=current_user.username) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary transition-colors">
                                <i class="fa fa-list-alt mr-2"></i> 我的文章
                            </a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-sm text-danger hover:bg-gray-50 transition-colors">
                                <i class="fa fa-sign-out mr-2"></i> 退出登录
                            </a>
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="flex items-center space-x-2">
                    <a href="{{ url_for('login') }}" class="px-3 py-1.5 text-sm font-medium text-primary hover:bg-primary/5 rounded transition-colors">
                        登录
                    </a>
                    <a href="{{ url_for('register') }}" class="px-3 py-1.5 text-sm font-medium bg-primary text-white rounded hover:bg-primary/90 shadow-sm hover:shadow transition-all">
                        注册
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8 max-w-5xl">
        <!-- 返回按钮 -->
        <div class="mb-6">
            <a href="{{ url_for('profile') }}" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors">
                <i class="fa fa-arrow-left mr-2"></i>
                <span class="font-medium">返回个人资料</span>
            </a>
        </div>
        
        <!-- 编辑资料卡片 -->
        <div class="bg-white rounded-2xl shadow-card hover:shadow-card-hover transition-all-300 overflow-hidden">
            <div class="bg-gradient-to-r from-primary/10 to-primary/5 p-6 border-b border-gray-100">
                <h1 class="text-2xl font-bold text-gray-800">编辑个人资料</h1>
                <p class="text-gray-500 mt-1">更新您的个人信息和设置</p>
            </div>
            
            <div class="p-6 md:p-8">
                <form action="{{ url_for('edit_profile') }}" method="POST" class="space-y-6">
                    <!-- 个人信息区域 -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <!-- 左侧：头像区域 -->
                        <div class="md:col-span-1 flex flex-col items-center md:items-start">
                            <div class="relative mb-4">
                                <img src="{{ user.get_avatar(160) }}" alt="{{ user.nickname }}" class="w-40 h-40 rounded-full object-cover border-4 border-white shadow-md">
                                <div class="absolute bottom-0 right-0 bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-camera"></i>
                                </div>
                            </div>
                            
                            <div class="text-center md:text-left">
                                <h3 class="font-semibold text-gray-800">{{ user.nickname or user.email.split('@')[0] }}</h3>
                                <p class="text-sm text-gray-500 mt-1">@{{ user.username }}</p>
                                
                                <div class="mt-4 text-sm text-gray-600 max-w-xs">
                                    <p class="mb-2">请选择您喜欢的头像</p>
                                    <div class="grid grid-cols-2 gap-3 mt-3">
                                        <div class="avatar-option">
                                            <input type="radio" name="avatar" id="avatar1" value="/static/resources/生成头像.png" class="hidden" {% if user.avatar == '/static/resources/生成头像.png' %}checked{% endif %}>
                                            <label for="avatar1" class="cursor-pointer block">
                                                <img src="/static/resources/生成头像.png" alt="头像1" class="w-16 h-16 rounded-full mx-auto border-2 hover:border-primary transition-all duration-200" id="img-avatar1">
                                            </label>
                                        </div>
                                        <div class="avatar-option">
                                            <input type="radio" name="avatar" id="avatar2" value="/static/resources/生成头像 (1).png" class="hidden" {% if user.avatar == '/static/resources/生成头像 (1).png' %}checked{% endif %}>
                                            <label for="avatar2" class="cursor-pointer block">
                                                <img src="/static/resources/生成头像 (1).png" alt="头像2" class="w-16 h-16 rounded-full mx-auto border-2 hover:border-primary transition-all duration-200" id="img-avatar2">
                                            </label>
                                        </div>
                                        <div class="avatar-option">
                                            <input type="radio" name="avatar" id="avatar3" value="/static/resources/生成头像 (2).png" class="hidden" {% if user.avatar == '/static/resources/生成头像 (2).png' %}checked{% endif %}>
                                            <label for="avatar3" class="cursor-pointer block">
                                                <img src="/static/resources/生成头像 (2).png" alt="头像3" class="w-16 h-16 rounded-full mx-auto border-2 hover:border-primary transition-all duration-200" id="img-avatar3">
                                            </label>
                                        </div>
                                        <div class="avatar-option">
                                            <input type="radio" name="avatar" id="avatar4" value="/static/resources/生成头像 (3).png" class="hidden" {% if user.avatar == '/static/resources/生成头像 (3).png' %}checked{% endif %}>
                                            <label for="avatar4" class="cursor-pointer block">
                                                <img src="/static/resources/生成头像 (3).png" alt="头像4" class="w-16 h-16 rounded-full mx-auto border-2 hover:border-primary transition-all duration-200" id="img-avatar4">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 右侧：表单区域 -->
                        <div class="md:col-span-2 space-y-6 w-full">
                            <!-- 昵称 -->
                            <div>
                                <label for="nickname" class="form-label">昵称</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                        <i class="fa fa-user"></i>
                                    </span>
                                    <input 
                                        type="text" 
                                        id="nickname" 
                                        name="nickname" 
                                        value="{{ user.nickname }}" 
                                        placeholder="请输入您的昵称" 
                                        class="form-input"
                                    >
                                </div>
                                <p class="mt-1 text-xs text-gray-500">昵称将显示在您的个人资料和评论中</p>
                            </div>
                            
                            <!-- 邮箱 -->
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                        <i class="fa fa-envelope"></i>
                                    </span>
                                    <input 
                                        type="email" 
                                        id="email" 
                                        name="email" 
                                        value="{{ user.email }}" 
                                        placeholder="您的邮箱地址" 
                                        class="form-input"
                                        disabled
                                    >
                                </div>
                                <p class="mt-1 text-xs text-gray-500">邮箱不可修改，请联系管理员</p>
                            </div>
                            
                            <!-- 个人简介 -->
                            <div>
                                <label for="bio" class="form-label">个人简介</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400 pt-3">
                                        <i class="fa fa-file-text-o"></i>
                                    </span>
                                    <textarea 
                                        id="bio" 
                                        name="bio" 
                                        rows="4" 
                                        placeholder="分享一些关于您的信息..." 
                                        class="form-input resize-none"
                                    >{{ user.bio }}</textarea>
                                </div>
                                <p class="mt-1 text-xs text-gray-500">告诉大家关于您的兴趣和专长</p>
                            </div>
                            
                            <!-- 保存和取消按钮 -->
                            <div class="flex space-x-3 pt-2">
                                <button type="button" onclick="window.history.back()" class="btn btn-light flex-1">
                                    <i class="fa fa-times mr-2"></i> 取消
                                </button>
                                <button type="submit" class="btn btn-primary flex-1">
                                    <i class="fa fa-check mr-2"></i> 保存更改
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10 mt-16">
        <div class="container mx-auto px-4 max-w-5xl">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">个人博客</h3>
                    <p class="text-gray-400 text-sm">分享知识，记录成长</p>
                    <div class="mt-4 flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="{{ url_for('index') }}" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">文章归档</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">订阅更新</h3>
                    <p class="text-gray-400 text-sm mb-3">获取最新文章和通知</p>
                    <form class="flex">
                        <input type="email" placeholder="您的邮箱" class="flex-1 px-3 py-2 rounded-l-lg focus:outline-none text-gray-800">
                        <button type="submit" class="bg-primary text-white px-3 py-2 rounded-r-lg hover:bg-primary/90 transition-colors">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© {{ now.year }} 个人博客系统 | 使用 Flask 构建</p>
            </div>
        </div>
    </footer>

    <!-- 消息提示 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="fixed bottom-6 right-6 z-50">
            {% for category, message in messages %}
            <div class="bg-white rounded-lg shadow-xl p-4 max-w-xs flex items-start border-l-4 {{ 'border-green-500' if category == 'success' else 'border-red-500' }} transform transition-all duration-500 ease-in-out opacity-0 translate-y-4" id="flash-message">
                <div class="{{ 'text-green-500' if category == 'success' else 'text-red-500' }} mr-3 mt-1">
                    <i class="{{ 'fa fa-check-circle' if category == 'success' else 'fa fa-exclamation-circle' }} text-xl"></i>
                </div>
                <div class="flex-1">
                    <h4 class="font-medium text-gray-800 text-sm">{{ '成功' if category == 'success' else '错误' }}</h4>
                    <p class="text-gray-600 text-sm mt-1">{{ message }}</p>
                </div>
                <button onclick="this.parentElement.remove()" class="text-gray-400 hover:text-gray-600 transition-colors ml-2">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <script>
                // 显示消息动画
                document.addEventListener('DOMContentLoaded', function() {
                    const flashMessage = document.getElementById('flash-message');
                    if (flashMessage) {
                        setTimeout(() => {
                            flashMessage.classList.remove('opacity-0', 'translate-y-4');
                        }, 100);
                        
                        // 5秒后自动关闭
                        setTimeout(() => {
                            flashMessage.classList.add('opacity-0', 'translate-y-4');
                            setTimeout(() => {
                                flashMessage.remove();
                            }, 500);
                        }, 5000);
                    }
                });
            </script>
            {% endfor %}
        </div>
        {% endif %}
    {% endwith %}

    <script>
        // 添加当前年份到页脚
        document.addEventListener('DOMContentLoaded', function() {
            const footerYear = document.querySelector('footer p');
            if (footerYear) {
                footerYear.innerHTML = footerYear.innerHTML.replace('{{ now.year }}', new Date().getFullYear());
            }
            
            // 导航栏滚动效果
            const header = document.querySelector('header');
            window.addEventListener('scroll', function() {
                if (window.scrollY > 10) {
                    header.classList.add('py-2', 'shadow-lg');
                    header.classList.remove('py-3', 'shadow-md');
                } else {
                    header.classList.add('py-3', 'shadow-md');
                    header.classList.remove('py-2', 'shadow-lg');
                }
            });
            
            // 头像选择效果
            const avatarInputs = document.querySelectorAll('input[name="avatar"]');
            const avatarImages = document.querySelectorAll('.avatar-option img');
            
            // 初始化选中状态
            updateAvatarSelection();
            
            // 添加点击事件
            avatarInputs.forEach(input => {
                input.addEventListener('change', updateAvatarSelection);
            });
            
            function updateAvatarSelection() {
                avatarImages.forEach(img => {
                    img.classList.remove('border-primary');
                    img.classList.add('border-transparent');
                });
                
                avatarInputs.forEach(input => {
                    if (input.checked) {
                        const imgId = 'img-' + input.id;
                        const selectedImg = document.getElementById(imgId);
                        if (selectedImg) {
                            selectedImg.classList.remove('border-transparent');
                            selectedImg.classList.add('border-primary');
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>